<template>
<div :class="[$style.container]">
  <div :class="[$style.header]">
    <query-form :keyword="keyword" :data="pageData" ref="querForm"></query-form>
    <search-nav :data="pageData" :right-expand.sync="rightExpand" style="height: 40px;"></search-nav>
  </div>
  <div :class="[$style.body]">
    <div :class="[$style.content]">
      <search-list :data="pageData" :selectedRow.sync="selectedRow"></search-list>
      <empty-data v-if="!pageData.loading && pageData.rows.length < 1">
        <div class="mb-3">没有搜索到任何文档</div>
      </empty-data>
    </div>
    <div :class="[$style.aside]" v-if="rightExpand">
      <doc-panel :data="selectedRow"></doc-panel>
    </div>
  </div>
</div>
</template>

<script lang="ts">

import { download } from '@/api/doc'
import { searchDocs } from '@/api/doc-search'
import { PageData, PageQueryParams } from '@/config/page'
import { downloadFromUrl } from '@/utils/download'
import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import QueryForm from './components/query-form/index.vue'
import SearchList from './components/search-list/index.vue'
import SearchNav from './components/search-nav/index.vue'
import DocPanel from '@/views/pages/components/doc-panel/index.vue'

@Component({
  components: { QueryForm, SearchList, SearchNav, DocPanel }
})
export default class Search extends Vue {
  @Prop(String) keyword!: string

  @Ref() querForm!: QueryForm

  pageData: PageData<any> = new PageData(this.loader, { size: 30 })

  current: any = null

  selectedRow: any = null

  localRightExpand = this.$storage.get('search-doc-panel') !== false

  get rightExpand () {
    return !!this.localRightExpand
  }

  set rightExpand (expand: boolean) {
    this.localRightExpand = !!expand
    this.$storage.set('search-doc-panel', !!expand)
  }

  get loader () {
    return (params: PageQueryParams) => {
      const extra = Object.assign({ keyword: this.keyword }, params)
      return searchDocs(extra).then(data => {
        data.content.forEach((w: any) => {
          w.checked = false
        })
        return data
      })
    }
  }

  get checkedRows () {
    const rows = this.pageData.rows
    return rows.filter(v => v.checked)
  }

  get fullKeyword () {
    return this.keyword + '#' + this.$route.query?._t
  }

  search () {
    this.$nextTick(() => {
      if (this.querForm) {
        this.querForm.search()
      } else {
        this.pageData.load()
      }
    })
  }

  @Provide() openDoc (row: any) {
    const doc = row
    const parentId = doc.parentId
    const id = doc.id
    const ownType = doc.ownType
    const ownId = doc.ownId

    const query = {
      id: parentId,
      selectedId: id
    }

    if (ownType === 'enterprise') {
      this.$router.push({ path: `/ent/${ownId}/docs`, query })
    } else {
      this.$router.push({ path: '/docs', query })
    }
  }

  @Provide() editDoc (row: any) {
    const doc = row
    window.open(`/editor/${doc.id}`)
  }

  @Provide() previewDoc (row: any) {
    const doc = row
    window.open(`/preview/${doc.id}`)
  }

  @Provide() downloadDoc (row: any) {
    const doc = row
    if (doc.type === 'dir') {
      this.$message.info('暂不支持文件夹下载')
      return
    }
    download(doc.id).then(url => {
      const response = {
        'content-disposition': `attachment; filename=${encodeURIComponent(doc.name)}`
      }
      this.$oss.signatureUrl(url, { response }).then(url => {
        downloadFromUrl(url)
      })
    })
  }

  @Watch('fullKeyword') keywordChange () {
    this.search()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

$header-height: 72px;

.container {
  height: 100%;
}

.header {
  height: $header-height;
  background-color: $bg-color;
  border-bottom: 1px solid $border-split-color;
  box-sizing: border-box;
}

.body {
  display: flex;
  height: calc(100% - #{$header-height});
}

.content {
  flex: 1 1 auto;
  height: 100%;
  background-color: $bg-color;
  overflow: auto;
  position: relative;
}

.aside {
  width: 300px;
  flex: 0 0 auto;
  height: 100%;
  overflow: auto;
}
</style>
